<template>
  <div>
    <div class="culture-box tc">
      <van-row gutter="5">
          <van-col span="16">
            <div class="icon-box zypc">
              <i class="iconfont icon-ceping"></i>
              <h3>专业评测</h3>
            </div>
          </van-col>
          <van-col span="8">
            <div class="icon-box ywjd">
              <i class="iconfont icon-jieda"></i>
              <h3>疑问解答</h3>
            </div>
          </van-col>
          <van-col span="8">
            <div class="icon-box xz">
              <i class="iconfont icon-suoshuxiaozu"></i>
              <h3>小组</h3>
            </div>
          </van-col>
          <van-col span="16">
            <div class="icon-box hdzx">
              <i class="iconfont icon-zixun"></i>
              <h3>活动资讯</h3>
            </div>
          </van-col>
          <van-col span="16">
            <div class="icon-box dyzx">
              <i class="iconfont icon-zixun1"></i>
              <h3>电烟资讯</h3>
            </div>
          </van-col>
          <van-col span="8">
            <div class="icon-box xpss">
              <i class="iconfont icon-xinpintuijian"></i>
              <h3>新品上市</h3>
            </div>
          </van-col>
      </van-row>
    </div>
      
  </div>
</template>

<script>
import {
  Tag,
  Col,Row,
  Icon,
} from 'vant';
import * as shop from 'api/shop'
export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
  },

  data() {
    return {
      showTwo:false,
      typeData:[],
      typeDataChild:{
      },
    };
  },

  methods: {
    showTypeChild(item) {
      this.$set(this,'typeDataChild',item);
      this.$nextTick(()=>{
        this.showTwo=true;
      })
    },
    getGoodsTypeTree(){
      shop.getGoodsTypeTree().then(data=>{
        this.typeData=data.obj;
      })
    }
  },
  mounted(){
    this.getGoodsTypeTree()
  }
};
</script>

<style lang="less">
.culture-box{
  width:100%;height:100%;padding:10px;box-sizing:border-box;background-color:#0d263b;
  .icon-box{height:3rem;color:#fff;font-size:.32rem;margin-bottom:10px;
    .iconfont{font-size:1rem;margin-top:.4rem;display:inline-block;}
  }
  .zypc{background-color:#ed6614;}
  .ywjd{background-color:#6bb5a1;}
  .xz{background-color:#663654;}
  .hdzx{background-color:#5c38b8;}
  .dyzx{background-color:#7d299e;}
  .xpss{background-color:#e4007f;}
}

</style>